<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微聚商城管理</title>
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">
    <style>
        @font-face {
            font-family: FontAwesome;
            font-style: normal;
            font-display: auto;
            src: url(fa-solid-900.woff2) format('woff2');
        }


        body {
            display: flex;
            margin: 0;
            background-color: #eee;
            height: 100vh;
        }

        nav {
            display: flex;
            flex-direction: column;
            background-color: #1D232C;
            color: #AAA;
            width: 200px;
        }

        a.active {
            color: white;
        }

        .center {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        nav > a {
            padding: 4px;
        }
        nav > a:first-child {
            font-size: 1.2rem;
            height: 50px;
        }

        #menu a {
            margin-top: 20px;
            display: flex;
            font-size: 0.9rem;
            height: 20px;
        }

        #menu a::before {
            content: attr(data-icon);
            font-family: FontAwesome!important;
            font-size: 1.2em;
            padding-right: 0.5rem;
            width: 31px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
        }

        #menu svg {
            padding-right: 0.5rem;
            width: 31px;
            margin-right: 0.5rem;
            display: inline-flex;
        }

        #menu {
            background-color: #272F3B;
            padding-left: 18px;
            flex-grow: 1;
        }

        a, a:visited {
            color: inherit;
            text-decoration: none;
        }

        a:hover {
            color: #fff;
        }

        .ticket div {
            justify-content: space-between;
            display: flex;
            padding: 0.3em 0.7em;
        }

        .ticket > span {
            padding: 0.1em 0.7em;
        }

        main {
            flex-grow: 1;
            padding: 20px;
            justify-content: center;
        }

        .icon > svg {
            width: 48px;
        }

        iframe {
            border:  none;
            height: 800px;
        }

        #monitor {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            height: 100%;
            width: 380px;
            background-color: #262626;
        }

        #monitor > div {
            flex-grow: 1;
        }
    </style>
</head>
<body>
<nav>
    <a class="active center">微聚商城</a>
    <div id="menu">
        <a data-icon="">商品管理</a>
        <a data-icon="">分类管理</a>
        <a data-icon="">库存管理</a>
    </div>
    <a href="https://shimmer.neusoft.edu.cn" style="justify-content: center;">©微光网络工作室</a>
</nav>
<main>

</main>
<div id="monitor">
    <div id="monitor_up">

    </div>
    <iframe title="微聚商城" src="mindex.html" id="page">

    </iframe>
    <div id="monitor_down">

    </div>
</div>
<script>
    const $ = v => document.querySelector(v);
</script>
          
<script src="/layui/layui.js" charset="utf-8"></script>
<script>
layui.use(['table', 'util'], function(){
  var table = layui.table
  ,util = layui.util;
  
  //监听单元格编辑
  table.on('edit(test3)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data //得到所在行所有键值
    ,field = obj.field; //得到字段
    layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改值为：'+ util.escape(value));
  });
});
</script>
</body>
</html>